<template>
    <p>personReactive: {{ person }}</p>
    <button @click="updatePersonName">改名称</button>
    <button @click="updatePersonJob">改工作</button>

</template>

<script setup lang="ts">
import {reactive, readonly, shallowReadonly} from "vue";

let person = reactive({ name: "zs", address: "hefei" , job:{
    sal:20,
    lever:1
}});

let p1 = readonly(person)
let p2 = shallowReadonly(person)

function updatePersonName() {
  // 这里p1是只读的，不能修改name
   p1.name = 'zs12'
}

function updatePersonJob() {
  // 这里p1是只读的，sal属性属于深度属性，使用shallowReadonly可以修改
   p2.job.sal = 21
}



</script>